<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Moonbay</title>
    <link rel="icon" type="image/x-icon" href="picture/图标logo.ico">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/lunbotu.css">
    <link rel="stylesheet" href="css/pagefooter.css">
    <link href="css\pagefooter.css" rel="stylesheet">
</head>
<script type="text/javascript" src="js\getUrlParam.js"></script>

<body>
    <div class="head">
        <ul>
            <li class="first">
                <a href="###">
                    <img src="image/logo2.png">
                </a>
            </li>
            <li class="center spe"><a href="">Home</a></li>
            <li class="center"><a href="mymusic.html">My Music</a></li>
            <li class="center"><a href="singer.html">singer</a></li>
            <li class="center"><a href="ranking.html">Top</a></li>
            <li class="center"><a href="radio.html">Radio</a></li>
            <li class="login"><a href="re.html">Register</a></li>
            <li class="login"><a href="login.html">Login</a></li>
            <li class="login dotted"></li>
            <li class="login search">
                <input type="text" class="tex">
                <button class="btn"><i class="iconfont icon-sousuo"></i></button>
            </li>
        </ul>
    </div>
    <div class="back">
        <div class="ban">
            <div class="title">Excellent recommendation</div>
            <div id="container">
                <ul class="parent" style="left: 0;">
                    <li><img src="image/lunbo2.jpg"></li>
                    <li><img src="image/lunbo3.jpg"></li>
                    <li><img src="image/lunbo1.jpg"></li>
                    <li><img src="image/lunbo4.jpg"></li>
                    <li><img src="image/lunbo5.jpg"></li>
                </ul>

                <div class="btnLeft">&lt;</div>
                <div class="btnRight">&gt;</div>
                <!-- <div class="modal">
                <div class="title">
                    <h2>轮播图</h2>
                </div>
                <div class="dots"> -->
                <ul class="clearfix">
                    <li class="on"></li>
                    <li class="off"></li>
                    <li class="off"></li>
                    <li class="off"></li>
                    <li class="off"></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="back">
        <div class="ban">
            <div class="title">Recommended Playlist</div>
            <div class="classify clearfix">
                <a href="javascript:;" class="classify-name active">Recommended</a>
                <a href="javascript:;" class="classify-name">Light Music</a>
                <a href="javascript:;" class="classify-name">Pops</a>
                <a href="javascript:;" class="classify-name">ballad</a>
                <a href="javascript:;" class="classify-name">Electronic Music</a>
            </div>
            <div class="classify-list clearfix">
                <div class="classify-item">
                    <div class="playlistbox">
                        <a href="player.html?name=High Quality English Song&photodata=picture/n1.avif">
                            <img src="picture/n1.avif" alt="">
                        </a>
                    </div>
                    <div class="classify-item-n">[High Quality English Song] English song that allows you to loop your
                        single</div>
                    <div class="classify-item-num">play：18.52 million</div>
                </div>
                <div class="classify-item">
                    <div class="playlistbox">
                        <a href="player.html?name=Holiday Vlog&photodata=picture/n2.jpg">
                            <img src="picture/n2.jpg" alt="">
                        </a>
                    </div>
                    <div class="classify-item-n">Holiday Vlog | Dance rhythm, airy sonata</div>
                    <div class="classify-item-num">play：13.75 million</div>
                </div>
                <div class="classify-item">
                    <div class="playlistbox">
                        <a href="player.html?name=European fairy throat&photodata=picture/n3.jpg">
                            <img src="picture/n3.jpg" alt="">
                        </a>
                    </div>
                    <div class="classify-item-n">『European fairy throat』Light sweet offensive ♡ enjoy</div>
                    <div class="classify-item-num">play：2.2 million</div>
                </div>
                <div class="classify-item">
                    <div class="playlistbox">
                        <a href="player.html?name=Rhythm feast&photodata=picture/n4.jpg">
                            <img src="picture/n4.jpg" alt="">
                        </a>
                    </div>
                    <div class="classify-item-n">『Rhythm feast』There's always one of your singles on the loop</div>
                    <div class="classify-item-num">play：16.2 million</div>
                </div>

                <div class="classify-item">
                    <div class="playlistbox">
                        <a href="player.html?name=Capture the beauty&photodata=picture/n5.png">
                            <img src="picture/n5.png" alt="">
                        </a>
                    </div>
                    <div class="classify-item-n">Relax丨Capture the beauty and enjoy a peaceful life</div>
                    <div class="classify-item-num">play：19.4 million</div>
                </div>
            </div>
        </div>
    </div>
    <div class="back">
        <div class="ban">
            <div class="title">New Song Express</div>
            <div class="classify clearfix">
                <a href="javascript:;" class="classify-name active">New Song</a>
                <a href="javascript:;" class="classify-name">Inland </a>
                <a href="javascript:;" class="classify-name">Hongkong</a>
                <a href="javascript:;" class="classify-name">Europe</a>
                <a href="javascript:;" class="classify-name">Korea</a>
                <a href="javascript:;" class="classify-name">Japanese</a>
            </div>
            <div class="newMusic clearfix">
                <div class="newMusic-item">

                    <div class="newM-item clearfix">
                        <div class="newM-item-lg">
                            <div class="expressbox">
                                <a href="player.html?name=Dreamers&photodata=picture/song1.jpg">
                                    <img src="picture/song1.jpg" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="newM-item-con">
                            <div>Dreamers</div>
                            <div class="grey">Jung Kook</div>
                        </div>
                        <div class="newM-rg">
                            03:21
                        </div>
                    </div>
                    <div class="newM-item clearfix">
                        <div class="newM-item-lg">
                            <div class="expressbox">
                                <a href="player.html?name=那么骄傲&photodata=picture/song2.jpg">
                                    <img src="picture/song2.jpg" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="newM-item-con">
                            <div>那么骄傲</div>
                            <div class="grey"> Bell玲惠</div>
                        </div>
                        <div class="newM-rg">
                            03:17
                        </div>
                    </div>
                    </a>
                    <div class="newM-item clearfix">
                        <div class="newM-item-lg">
                            <div class="expressbox">
                                <a href="player.html?name=写不来情歌&photodata=picture/song3.webp">
                                    <img src="picture/song3.webp" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="newM-item-con">
                            <div>写不来情歌</div>
                            <div class="grey">艾志恒Asen/付思瑶</div>
                        </div>
                        <div class="newM-rg">
                            02:28
                        </div>
                    </div>
                </div>
                <div class="newMusic-item">
                    <div class="newM-item clearfix">
                        <div class="newM-item-lg">
                            <div class="expressbox">
                                <a href="player.html?name=感同身受&photodata=picture/song4.jpg">
                                    <img src="picture/song4.jpg" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="newM-item-con">
                            <div>感同身受</div>
                            <div class="grey">某幻君</div>
                        </div>
                        <div class="newM-rg">
                            02:54
                        </div>
                    </div>
                    <div class="newM-item clearfix">
                        <div class="newM-item-lg">
                            <div class="expressbox">
                                <a href="player.html?name=等风吹&photodata=picture/song5.jpg">
                                    <img src="picture/song5.jpg" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="newM-item-con">
                            <div>等风吹</div>
                            <div class="grey">LBI利比</div>
                        </div>
                        <div class="newM-rg">
                            02:58
                        </div>
                    </div>
                    <div class="newM-item clearfix">
                        <div class="newM-item-lg">
                            <div class="expressbox">
                                <a href="player.html?name=Anti-Hero&photodata=picture/song6.webp">
                                    <img src="picture/song6.webp" alt="">
                                </a>
                            </div>
                        </div>
                        <div class="newM-item-con">
                            <div>Anti-Hero (Acoustic Version) </div>
                            <div class="grey">Taylor Swift</div>
                        </div>
                        <div class="newM-rg">
                            03:16
                        </div>
                    </div>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div class="back">
        <div class="ban">
            <div class="title">New Album Debuts</div>
            <div class="classify clearfix">
                <a href="javascript:;" class="classify-name active">Inland</a>
                <a href="javascript:;" class="classify-name">Hongkong</a>
                <a href="javascript:;" class="classify-name">Europe</a>
                <a href="javascript:;" class="classify-name">Korea</a>
                <a href="javascript:;" class="classify-name">Japanese</a>
                <a href="javascript:;" class="classify-name">Others</a>
            </div>
            <div class="classify-list clearfix">
                <div class="classify-item">
                    <div class="albumbox">
                        <a href="#">
                            <img src="picture/album1.jpg" alt="">
                        </a>
                    </div>
                    <div class="classify-item-n">Love Song</div>
                    <div class="classify-item-num">皮卡丘多多</div>
                </div>
                <div class="classify-item">
                    <div class="albumbox">
                        <a href="#">
                            <img src="picture/first1.jpg" alt="">
                        </a>
                    </div>
                    <div class="classify-item-n">我想</div>
                    <div class="classify-item-num">AFar陈侣帆 / Vinz T</div>

                </div>
                <div class="classify-item">
                    <div class="albumbox">
                        <a href="#">
                            <img src="picture/first2.jpg" alt="">
                        </a>
                    </div>
                    <div class="classify-item-n">三十王十三</div>
                    <div class="classify-item-num">王啸坤</div>

                </div>
                <div class="classify-item">
                    <div class="albumbox">
                        <a href="#">
                            <img src="picture/first3.jpg" alt="">
                        </a>
                    </div>
                    <div class="classify-item-n">水形物语</div>
                    <div class="classify-item-num">NoSleep Child 失眠少年</div>

                </div>
                <div class="classify-item">
                    <div class="albumbox">
                        <a href="#">
                            <img src="picture/first4.jpg" alt="">
                        </a>
                    </div>
                    <div class="classify-item-n">Twilight（黎明）</div>
                    <div class="classify-item-num">PRC 巴音汗</div>

                </div>
                <div class="classify-item">
                    <div class="albumbox">
                        <a href="#">
                            <img src="picture/first5.jpg" alt="">
                        </a>
                    </div>
                    <div class="classify-item-n">日月无归期</div>
                    <div class="classify-item-num">陈小满</div>
                </div>
                <div class="classify-item">
                    <div class="albumbox">
                        <a href="#">
                            <img src="picture/first6.jpg" alt="">
                        </a>
                    </div>
                    <div class="classify-item-n">昨天</div>
                    <div class="classify-item-num">新声主义</div>

                </div>
                <div class="classify-item">
                    <div class="albumbox">
                        <a href="#">
                            <img src="picture/first7.jpg" alt="">
                        </a>
                    </div>
                    <div class="classify-item-n">你的世界</div>
                    <div class="classify-item-num">傅梦彤 / 安苏羽</div>

                </div>
                <div class="classify-item">
                    <div class="albumbox">
                        <a href="#">
                            <img src="picture/first8.jpg" alt="">
                        </a>
                    </div>
                    <div class="classify-item-n">人间过客</div>
                    <div class="classify-item-num">乔洋 / 黄静美</div>

                </div>
                <div class="classify-item">
                    <div class="albumbox">
                        <a href="#">
                            <img src="picture/first9.jpg" alt="">
                        </a>
                    </div>
                    <div class="classify-item-n">梦半</div>
                    <div class="classify-item-num">王北车</div>

                </div>
            </div>
        </div>
    </div>
    
    <hr>
    <!--底部模块-->
<footer>
    <!--宣传模块-->
    <div class="pxx-service">
        <div class="container">
            <a href="">Sea of songs</a>
            <a href="">Excellent sound quality</a>
            <a href="">Free download </a>
        </div>
    </div>
    <!--版权信息-->
    <div class="pxx-copyright">
        <div class="container">
            <p>
                <a href="">About us</a>  |
                <a href="">Help center</a> ||
                <a href="">Business cooperation</a> |
                <a href="">Search Recommendations</a> |
                <a href="https://gitee.com/l3gend-chen/musicplayer">Open source interface</a>
            </p>
            <p>CopyRight @l3gend_chen/InsykBe/DreamYou</p>
        </div>
    </div>
</footer>
</body>
<script type="text/javascript">

    var imgShow = document.getElementsByClassName('parent')[0],
        dotList = document.querySelectorAll('.dots >.clearfix > li');
    var btnLeft = document.getElementsByClassName('btnLeft')[0],
        btnRight = document.getElementsByClassName('btnRight')[0];
    var dotLen = dotList.length,
        index = 0; //轮播层的图片索引，0表示第一张

    // //圆点显示
    // function showRadius() {
    //     for (var i = 0; i < dotLen; i++) {
    //         if (dotList[i].className === "on") {
    //             dotList[i].className = "off";
    //         }
    //     }
    //     dotList[index].className = "on";
    // }

    //向左移动
    btnLeft.onclick = function () {
        index--;
        if (index < 0) {  /*第1张向左时，变为第5张*/
            index = 4;
        }
        showRadius();
        var left;
        var imgLeft = imgShow.style.left;
        if (imgLeft === "0px") { /*当是第1张时，每张图片左移，移4张图，位置为-(4*800)*/
            left = -4000;
        }
        else {
            left = parseInt(imgLeft) + 1000; /*由于left为负数，每左移一张加800*/
        }
        imgShow.style.left = left + "px";
    }

    //向右移动
    btnRight.onclick = function () {
        index++;
        if (index > 4) {  /*第5张向右时，变为第1张*/
            index = 0;
        }
        showRadius();
        var right;
        var imgLeft = imgShow.style.left;
        if (imgLeft === "-4000px") { /*当是第5张时，第1张的位置为0*/
            right = 0;
        }
        else {
            right = parseInt(imgLeft) - 1000; /*由于left为负数，每右移一张减500*/
        }
        imgShow.style.left = right + "px";
    }

    // 自动轮播
    var timer;
    function autoPlay() {
        timer = setInterval(function () {
            var right;
            var imgLeft = imgShow.style.left;
            if (imgLeft === "-4000px") {
                right = 0;
            }
            else {
                right = parseInt(imgLeft) - 1000;
            }
            imgShow.style.left = right + "px";
        }, 4000)
    }
    autoPlay();

    for (var i = 0; i < dotLen; i++) {
        /*利用闭包传递索引*/
        (function (i) {
            dotList[i].onclick = function () {
                var dis = index - i; //当前位置和点击的距离
                imgShow.style.left = (parseInt(imgShow.style.left) + dis * 1000) + "px";
                index = i; //显示当前位置的圆点
                showRadius();
            }
        })(i);
    }

</script>

</html>